<template>
	<div>
		<div v-if="disabled" :class="`size-${size}`">
			<div class="width-100-percent border-box" style="height: 100%;display: flex;align-items: center;cursor: default;">
				<div v-if="!defaultList || !defaultList.length" class="disable-checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">无</div>
				<!--<div v-else class="disable-checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">{{ defaultList ? defaultList.map(x => x[showKey]).join(' , ') : '' }}</div>-->
				<div v-else class="disable-checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">{{ filterColor(defaultList) }}</div>
			</div>
		</div>
		<div
			v-else
			:class="[
				border ? `size-${size}` : '',
				border ? 'border-box' : ''
			]"
		>
			<div class="width-100-percent" style="height: 100%;display: flex;align-items: center;" @click="dialogState = true">
				<div v-if="!defaultList || !defaultList.length" :class="icon" class="checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">{{ textName }}</div>
				<!--<div v-else class="checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">{{ defaultList ? defaultList.map(x => x[showKey]).join(' , ') : '' }}</div>-->
				<div v-else class="checkbox-popover-txt" :style="{ fontSize: `${fontSize}px` }">{{ filterColor(defaultList) }}</div>
			</div>
		</div>

		<jk-dialog
			v-model="dialogState"
			:title="title"
			width="800px"
			:confirm-btn-loading="confirmBtnLoading"
			:show-content-loading="showLoading"
			append-to-body
			@on-cancel="onVisibleChange(false)"
			@on-visible-change="onVisibleChange"
			@on-confirm="onConfirmBtnOfDialog"
		>
			<jk-card ref="box1" class="margin-bottom-10">
				<div class="flex-start-center-wrap">
					<div
						v-for="(item, index) in dataList"
						:key="index"
						:style="{width: `calc(100% / ${ rowCount })`, padding: '2px 2px'}"
						style="box-sizing: border-box;margin-right: 0;"
					>
						<el-button
							class="width-100-percent"
							size="small"
							border
							:type="tableData.find(x => x.id === item.id) ? 'primary' : 'default'"
							@click="onSelectItem(item)"
						>{{ item[showKey] }}</el-button>
					</div>
				</div>
			</jk-card>

			<jk-table
				:row-config="{isCurrent: true}"
				:data="tableData || []"
				size="mini"
				:max-height="dialogTableHeight - 20"
			>
				<vxe-column :width="50" align="center" type="seq" title="序号"></vxe-column>
				<vxe-column :width="100" align="left" :field="showKey" title="颜色"></vxe-column>
				<vxe-column :width="150" align="center" field="state" title="状态">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.auditState"
							active-text="启用"
							inactive-text="停用"
							@change="onSwitchChange($event, scope)"
						></el-switch>
					</template>
				</vxe-column>
				<vxe-column :min-width="180" field="enableTime" title="启用时间">
					<template slot-scope="scope">
						<jk-date-picker v-model="scope.row.enableTime" type="datetime" placeholder="启用时间" class="width-100-percent"></jk-date-picker>
					</template>
				</vxe-column>
				<vxe-column :min-width="180" align="left" field="disableTime" title="停用时间">
					<template slot-scope="scope">
						<jk-date-picker v-model="scope.row.disableTime" type="datetime" placeholder="停用时间" class="width-100-percent"></jk-date-picker>
					</template>
				</vxe-column>
			</jk-table>
		</jk-dialog>
	</div>
</template>
<script>
    import calHeight from '../../../../../mixins/cal-dialog-height';
    import { formatTime, tipsBar } from '../../../../../utils/jk/jk-tool';
    import filterColor from './filter-color';
    export default {
        mixins: [calHeight, filterColor],
        props: {
            title: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
            textName: {
                type: String,
                default: '选择'
            },
            icon: {
                type: String,
                default: 'el-icon-plus'
            },
            defaultList: {
                type: Array,
                default() {
                    return [];
                }
            },
            width: {
                type: Number,
                default: 360
            },
            rowCount: {
                type: Number,
                default: 6
            },
            fontSize: {
                type: Number,
                default: 13
            },
            onlyKey: {
                type: String,
                default: 'id'
            },
            showKey: {
                type: String,
                default: 'name'
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            border: {
                type: Boolean,
                default: true
            },
            size: {
                type: String,
                default: 'small'
            }
        },
        data() {
            return {
                confirmBtnLoading: false,
                tableData: [],
                showLoading: false,
                dialogState: false,
                visible: false,
                checkList: [],
                dataList: []
            };
        },
        methods: {
            onSelectItem(item) {
                const has = this.tableData.some(x => x.id === item.id);
                if (has) {
                    const arr = this.tableData.filter(x => x.id !== item.id);
                    this.tableData = arr;
                } else {
                    this.tableData.forEach(x => {
                        this.$set(x, 'auditState', false);
                    });
                    this.tableData.push({
                        auditState: true,
                        enableTime: formatTime(Date.now()),
                        ...item
                    });
                }
            },
            onConfirmBtnOfDialog() {
                const hasOne = this.tableData.some(x => x.auditState);
                if (hasOne) {
                    this.confirmBtnLoading = true;
                    this.updateParentData(this.tableData);
                    this.$nextTick(() => {
                        this.dialogState = false;
                    });
                } else {
                    tipsBar(this, 'custom', 'warning', '请指定一个启用的项!');
                }
            },
            updateParentData(data) {
                const arr = JSON.parse(JSON.stringify(data));
                this.$emit('update:defaultList', arr);
                this.$emit('change', arr);
            },
            onSwitchChange(e, scope) {
                if (e) {
                    this.tableData.forEach(x => {
                        if (x[this.onlyKey] !== scope.row[this.onlyKey]) {
                            this.$set(x, 'auditState', false);
                        }
                    });
                }
            },
            onVisibleChange(e) {
                this.dialogState = e;
                if (e) {
                    this.checkList = this.defaultList ? JSON.parse(JSON.stringify(this.defaultList)) : [];
                    this.dataList = (this.optionList || []).map(x => {
                        x.checked = false;
                        if (this.defaultList) {
                            this.defaultList.forEach(k => {
                                if (k[this.onlyKey] === x[this.onlyKey]) {
                                    x.checked = true;
                                }
                            });
                        }
                        return x;
                    });
                } else {
                    this.confirmBtnLoading = false;
                    this.checkList = [];
                    this.dataList = [];
                }
            },
            onVisibleChangeOfPopover(e) {
                if (e) {
                    this.checkList = this.defaultList ? JSON.parse(JSON.stringify(this.defaultList)) : [];
                    this.dataList = (this.optionList || []).map(x => {
                        x.checked = false;
                        if (this.defaultList) {
                            this.defaultList.forEach(k => {
                                if (k[this.onlyKey] === x[this.onlyKey]) {
                                    x.checked = true;
                                }
                            });
                        }
                        return x;
                    });
                } else {
                    this.checkList = [];
                    this.dataList = [];
                }
            },
            onConfirmBtn() {
                if (this.checkList.length) {
                    const arr = [];
                    this.checkList.filter(x => {
                        this.dataList.find(k => {
                            if (parseFloat(x) === parseFloat(k[this.onlyKey])) {
                                arr.push(k);
                            }
                        });
                    });
                    this.updateParentData(arr);
                    this.visible = false;
                }
            }
        },
        watch: {
            dialogState(newVal) {
                if (newVal) {
                    this.tableData = this.defaultList ? JSON.parse(JSON.stringify(this.defaultList)) : [];
                }
            }
        }

    };
</script>
<style scoped lang="scss">
.size-mini {
    height: 30px;
}
.size-small {
    height: 32px;
}
.size-small {
    height: 34px;
}
.size-medium {
    height: 36px;
}
.size-default {
    height: 40px;
}
.size-large {
    height: 40px;
}
.border-box {
    width: 100%;
    background: #fff;
    border: solid 1px #DCDFE6;
    border-radius: 4px;
    padding: 0 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.checkbox-popover-txt {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 13px;
    color: #2b85e4;
    box-sizing: border-box;
    cursor: pointer;
}
.disable-checkbox-popover-txt {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 13px;
    color: #515a6e;
    box-sizing: border-box;
}
</style>
